<template>
  <div class="dji-air-2s">
    <!-- 这是一个test页面、。 -->
    <div class="container">
      <div class="path-name">
        <router-link to="/index"><span>商城首页</span> </router-link>&nbsp;/
        <router-link to="/Mavic-series"> <span>御Mavic</span></router-link
        >&nbsp;/ Mavic-air-2
      </div>
      <div class="product-detail">
        <div class="photo-swiper">
          <productLunbo :photoArr="goodsPhotos"></productLunbo>
        </div>
        <div class="product-introduction">
          <div class="name">{{ goodsName }}</div>
          <div class="price">￥{{ goodsPrice }}</div>
          <div class="instalments">
            <span>低至￥{{ (goodsPrice / 12).toFixed(2) }}×12期</span>
            &nbsp;支持花呗分期、京东白条、掌上生活分期付款
          </div>
          <div class="test">
            <ul>
              <li>一英寸影像传感器</li>
              <li>5.4K 超高清视频</li>
              <li>大师镜头</li>
              <li>12 公里 1080p 图传</li>
              <li>四向环境感知</li>
            </ul>
            <div class="choose">
              <h1>选择套装</h1>
              <div
                class="choose-item"
                :class="{ blueBorder: isBlueBorder == 1 }"
                @click="chooseOne"
              >
                <h2>{{ productObj.name }}</h2>
                <h3>
                  ￥{{ productObj.price }}或低至￥{{
                    (productObj.price / 12).toFixed(2)
                  }}×12期
                </h3>
              </div>
              <div
                class="choose-item"
                :class="{ blueBorder: isBlueBorder == 2 }"
                @click="chooseTwo"
              >
                <h2>{{ productObj.name }} &nbsp;套装</h2>
                <h3>
                  ￥{{ productObj.sale_price }}或低至￥{{
                    (productObj.sale_price / 12).toFixed(2)
                  }}×12期
                </h3>
              </div>
            </div>
          </div>
          <button @click="addToCart">加入购物车</button>
        </div>
      </div>
    </div>
    <div v-html="productObj.rich_text" ref="richtext" class="richtext"></div>
    <BuyFooter :goodsPrice="goodsPrice"  @footerGoCrat="addToCart"></BuyFooter>
  </div>
</template>

<script>
import { singleGood, shoppingToCart } from "@/assets/tool/request.js";
import ProductLunboNew from "@/components/productComponent/ProductLunboNew.vue";
import BuyFooter from "@/components/productComponent/BuyFooter.vue";

export default {
  data() {
    return {
      // aa: "",
      productObj: {},
      goodsPhotos: [],
      isBlueBorder: 1,
      goodsName: "",
      goodsPrice: "",
    };
  },
  components: {
    productLunbo: ProductLunboNew,
    BuyFooter: BuyFooter,
  },
  methods: {
    chooseOne() {
      this.isBlueBorder = 1;
      this.goodsName = this.productObj.name;
      this.goodsPrice = this.productObj.price;
    },
    chooseTwo() {
      this.isBlueBorder = 2;
      this.goodsName = this.productObj.name + "套装";
      this.goodsPrice = this.productObj.sale_price;
    },
    async addToCart() {
      this.$router.push("/cart");
      await shoppingToCart({
        num: 1,
        goods_id: 753,
      });
    },
  },

  async created() {
    let res = await singleGood(753);
    this.productObj = res.data.result;
    this.goodsPhotos = this.productObj.s_goods_photos;
    this.goodsName = this.productObj.name;
    this.goodsPrice = this.productObj.price;
  },
  updated() {
    // 这里是获取了这个添加内容的节点，然后通过dom操作去更改内容
    let obj = this.$refs.richtext;
    let richImgs = obj.querySelectorAll("img");
    let richH2s = obj.querySelectorAll("h2");
    richImgs.forEach((ele) => {
      ele.style = "width:1200px;margin:10px auto ";
    });
    richH2s.forEach((ele) => {
      ele.style = `font-size:24px;font-weight: 560;line-height: 40px;`;
    });
  },
};
</script>

<style lang="scss" scoped>
.blueBorder {
  border-color: rgb(24, 144, 255) !important;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.path-name {
  font-size: 18px;
  padding: 20px 0;
  color: #888;
  span {
    color: #666;
  }
}
.product-detail {
  // padding: 20px 0;
  display: flex;
  justify-content: space-between;
  .photo-swiper {
    width: 622px;
    height: 622px;
    // background-color: pink;
    position: relative;
  }
  .product-introduction {
    width: 500px;
    .name {
      font-size: 36px;
      text-transform: uppercase;
      line-height: 36px;
    }
    .price {
      font-size: 24px;
      line-height: 28px;
      margin-top: 16px;
    }
    .instalments {
      font-size: 14px;
      line-height: 20px;
      span {
        font-weight: 550;
      }
    }
    .test {
      margin-top: 16px;
      ul {
        li {
          display: flex;
          align-items: center;
          line-height: 20px;
          font-style: 12px;
          margin-top: 4px;
          &::before {
            content: "";
            margin-right: 10px;
            display: inline-block;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: rgb(51, 51, 51);
          }
        }
      }
    }
    .choose {
      text-transform: uppercase;
      letter-spacing: 3px;
      margin-top: 36px;
      h1 {
        font-weight: 550;
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 10px;
      }
      .choose-item {
        width: 100%;
        border-radius: 10px;
        border: 2px solid #eee;
        height: 60px;
        padding: 23px;
        margin-bottom: 10px;
        h2 {
          font-size: 18px;
          line-height: 24px;
          font-weight: 540;
        }
        h3 {
          font-size: 16px;
          line-height: 20px;
          margin-top: 10px;
          font-weight: 400;
        }
      }
    }
    button {
      width: 200px;
      height: 70px;
      text-align: center;
      line-height: 70px;
      background-image: linear-gradient(0deg, #1890ff, #40a9ff);
      font-size: 22px;
      color: #fff;
      font-weight: 500;
      margin-top: 20px;
      border-radius: 5px;
    }
  }
}
.richtext {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>